<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自然堂</title>
    <link rel="stylesheet" href="../css/base.css">
    <link href=" https://chandoweb.oss-cn-shanghai.aliyuncs.com/fz/favicon.ico" rel="icon" />
    <link rel="stylesheet" href="../css/index.css">

</head>

<body>
    <!-- 头部 -->
    <header>
        <img src="../img/index/logo.png" alt="">
    </header>

    <!-- 导航栏 -->
    <nav>
        <!-- 下拉logo显示 -->
        <div class="nav-logo"><img src="../img/index/logo.png" alt=""></div>
        <ul name="list" id="list">
            <li><a class="btn btn-primary btn-lg" href="./index.html?cat_one_id=热门推荐" role="button">首页</a></li>
            <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=汽车生活" role="button">护肤</a></li>
            <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=生活电器" role="button">面膜</a></li>
            <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=家居生活" role="button">彩妆</a></li>
            <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=珠宝首饰" role="button">男士</a></li>
            <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=海外购" role="button">会员俱乐部</a></li>
            <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=海外购" role="button">关于自然堂</a></li>
            <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=童装玩具" role="button">专柜查询</a></li>
            <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=大家电" role="button">防伪查询</a></li>
        </ul>

        <div class="search">
            <a href="./list.html?cat_one_id=海外购"><img src="../img/index/search.png" alt=""></a>
            <a href="./cart.html"><img src="../img/index/cart.png" alt=""></a>
            <a href="./login.html" class="last"><img src="../img/index/personalCenter.png" alt=""><span
                    id="localUser"></span></a>
            <a href="./index.html"name="logout" class="logout"><img src="../img/index/right.png" alt=""><span
                    id="localUser"></span></a>
        </div>

    </nav>

    <!-- 内容区 -->
    <main>
        <!-- 轮播图 -->
        <div class="banner"></div>
        <script src="../js/banner.js"></script>
        <script src="../js/move.js"></script>
        <!-- 面向对象 -->
        <script>
            // 定义一个数组 存储 后端返回的轮播图数据
            const arr = [
                { id: 1, width: 1200, height: 333, size: 20.3, url: 'banner01.jpg' },
                { id: 2, width: 1200, height: 333, size: 20.3, url: 'banner02.jpg' },
                { id: 3, width: 1200, height: 333, size: 20.3, url: 'banner03.jpg' },
                { id: 4, width: 1200, height: 333, size: 20.3, url: 'banner04.jpg' },
                { id: 5, width: 1200, height: 333, size: 20.3, url: 'banner05.jpg' },
            ];

            // 获取 生成轮播图的标签对象 
            const oBanner1 = document.querySelector('.banner');

            // 通过 构造函数创建 轮播图的实例化对象
            const bannerObj1 = new CreateBannerObj(oBanner1, arr);

            // 只需要调用一个入口函数就等于调用了所有的函数程序
            bannerObj1.init();

            // const bannerObj2 = new CreateBannerObj(oBanner2, arr);
            // // // 调用 实例化对象中的函数方法 实现轮播图的功能
            // bannerObj2.setPage();
            // bannerObj2.setClick();


        </script>



        <!-- 明星单品 -->
        <div class="starShop">
            <h3>明星单品</h3>
            <p>十大当季明星单品 <a href="#"><span>查看榜单</span><i><img src="../img/index/goToStarList.png" alt=""></i></a></p>
            <ul>
                <li>
                    <a href="#"><img src="../img/index/小紫瓶PC十大单品-首页.1624877886922.jpg" alt=""></a>
                    <p class="ten_tips1"><i><img src="../img/index/ten_tips.png"
                                alt=""></i><span>保湿滋润</span><span>无限回购</span><span>明星推荐</span></p>
                    <div class="tip1">
                        <p>「小紫瓶精华」3种成分 击退熬夜肌</p>
                        <p>凝时鲜颜肌活修护小紫瓶精华液</p>
                        <p>35ml / ¥240.00</p>
                        <a href="./cart.html">立即购买</a>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="../img/index/starShop5.png" alt=""></a>
                    <p class="ten_tips1"><i><img src="../img/index/ten_tips.png"
                                alt=""></i><span>无限回购</span><span>淡化细纹</span><span>焕亮眼周</span></p>
                    <div class="tip1">
                        <p>「小紫瓶熬夜眼霜」熬夜不怕熊猫眼</p>
                        <p>凝时鲜颜肌活修护眼霜 小紫瓶熬夜眼霜</p>
                        <p>15g / ¥240.00</p>
                        <a href="./cart.html">立即购买</a>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="../img/index/starShop7.png" alt=""></a>
                    <p class="ten_tips1"><i><img src="../img/index/ten_tips.png"
                                alt=""></i><span>滋养保湿</span><span>摆脱暗沉</span><span>无限回购</span></p>
                    <div class="tip1">
                        <p>「烟酰胺安瓶面膜」真安瓶 持久耀焕亮</p>
                        <p>烟酰胺细致提亮安瓶面膜</p>
                        <p>(1.5ml+33ml)*5 / ¥138.0</p>
                        <a href="./cart.html">立即购买</a>
                    </div>
                </li>
            </ul>
            <dl>
                <dd>
                    <a href="#"><img src="../img/index/PCstarShop3.1641262194726.jpg" alt=""></a>
                    <div class="two">
                        <p class="ten_tips1"><i><img src="../img/index/ten_tips.png"
                                    alt=""></i><span>持久妆效</span><span>养肤提亮</span><span>明星好物</span></p>
                        <div class="tip1">
                            <p>「持妆粉底液」妆效持久 不暗沉</p>
                            <p>感光无暇持妆粉底液</p>
                            <p>30ml / ¥150.00</p>
                            <a href="./cart.html">立即购买</a>
                        </div>
                    </div>
                </dd>
                <dd>
                    <a href="#"><img src="../img/index/冰肌水PC十大单品——首页.1624877906848.jpg" alt=""></a>
                    <div class="two">
                        <p class="ten_tips1"><i><img src="../img/index/ten_tips.png"
                                    alt=""></i><span>补水救星</span><span>温和舒缓</span><span>高性价比</span></p>
                        <div class="tip1">
                            <p>「冰肌水」堪比精华液的冰肌水</p>
                            <p>雪域纯粹滋润冰肌水 清润型</p>
                            <p>160ml / ¥150.00</p>
                            <a href="./cart.html">立即购买</a>
                        </div>
                    </div>
                </dd>
            </dl>
        </div>
        <!-- 好物推荐 -->
        <div class="goodShop">
            <h3>好物推荐</h3>
            <!-- 护肤 -->
            <div class="hufu">
                <a href="#" class="hu1"><img src="../img/index/hufuBg.png" alt=""></a>
                <ul>
                    <li><a href="#"><img src="../img/index/mianmo.png" alt=""></a></li>
                    <li><a href="#"><img src="../img/index/caizhuang.png" alt=""></a></li>
                    <li><a href="#"><img src="../img/index/nanshi.png" alt=""></a></li>
                    <li><a href="#"><img src="../img/index/gehu.png" alt=""></a></li>
                </ul>

            </div>
            <!-- 种草 -->
            <div class="zhongcao">
                <a href="#" class="zh1"><img src="../img/index/zhongcaoBg.png" alt=""></a>
                <a href="#">
                    <p>宝藏女孩的变美秘籍,你get了嘛?</p>
                </a>

            </div>
            <!-- 好物选择 -->
            <div class="questionnaire">
                <a href="#">
                    <p>好物选择</p>
                    <p class="p1">适合我的产品</p>
                    <span>问卷及推荐</span>
                </a>
            </div>

        </div>

        <!-- 关于自然堂 -->
        <div class="aboutChcedo">
            <h3>关于自然堂</h3>
            <!-- 视频 -->
            <div class="video">
                <video src="https://chandoweb.oss-cn-shanghai.aliyuncs.com/fz/video/about_%201350_630.mp4"></video>
                <div class="menbanV">
                    <img src="../img/index/play.png" alt="">
                </div>

            </div>
            <!-- 列表 -->
            <ul class="aboutList">
                <li>
                    <a href="#"><img src="../img/index/about1.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../img/index/about2.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../img/index/about3.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../img/index/about4.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../img/index/about5.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="../img/index/about6.png" alt=""></a>
                </li>

            </ul>

        </div>
    </main>
    <!-- 底部 -->
    <footer>
        <h3 style="margin-top: 30px; color: white;">官网特别服务</h3>
        <!-- 服务图标 -->
        <ul class="serviceList">
            <li>
                <a href=""><img src="../img/index/apply.png" alt="">
                    <p>适用申领</p>
                </a>
            </li>
            <li>
                <a href=""><img src="../img/index/shop.png" alt="">
                    <p>积分商城</p>
                </a>
            </li>
            <li>
                <a href=""><img src="../img/index/counter.png" alt="">
                    <p>专柜查询</p>
                </a>
            </li>
            <li>
                <a href=""><img src="../img/index/anti.png" alt="">
                    <p>防伪查询</p>
                </a>
            </li>

        </ul>
        <!-- 官网福利 -->
        <div class="b_left">
            <ul>
                <li>
                    <dl>
                        <dt>官网福利</dt>
                        <dd>正品保证</dd>
                        <dd>贴心售后</dd>
                        <dd>首购有礼</dd>
                        <dd>全场包邮</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>使用规范</dt>

                        <dd>使用条款</dd>
                        </a>

                        <dd>隐私政策</dd>
                        </a>

                        <dd>Cookies政策</dd>
                        </a>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>联系我们</dt>
                        <dd>总机:</dd>
                        <dd>021-62220000</dd>
                        <dd>客服热线:</dd>
                        <dd>400-888-2788</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>关注我们</dt>
                        <dd>

                            <img alt="" class="we" src="../img/index/wechart.png" />
                            官网微信

                        </dd>
                        <dd>

                            <img alt="" src="../img/index/weibo.png" />
                            官网微博

                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="bottomBg">
            <p>国家药监局提示您:化妆品不能宣称医疗作用,也没有治疗作用,宣称治疗儿童湿疹等皮肤病的产品不属于化妆品。</p>
            <p>©2020 伽蓝(集团)股份有限公司版权所有&emsp;&emsp;&emsp;&emsp;<span><img src="../img/index/icp_ico.png"
                        alt=""></span>&emsp;沪ICP备09100493号-3</p>
        </div>

    </footer>
    <a href="#" class="toTop"><img src="../img/index/top.png" alt=""></a>


    <script src="../tools/jquery.min.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/index.js"></script>
</body>

</html>